<template>
    <div class="activityInfo">
      <Vheader :header="header"></Vheader>
      <!--<ul class="infoUI"></ul>-->
      <div class="titlename">
        <span>{{templateName}}</span>
      </div>
      <div class="content">
        <div class="leftContent">
          <button class="leftcontentBar" :class = "{'bgColorCss1':isCss1,'bgColorCss2':isCss2}" @click="activityCode()"><span>活动二维码</span></button>
          <button class="leftcontentBar" :class = "{'bgColorCss1':isCss3,'bgColorCss2':isCss4}" @click="playersInfo"><span>玩家信息</span></button>
          <button class="backBtn" @click = "goBack()">返回</button>
        </div>
        <div class="rightContent">
          <div class="TwoDbarcode" v-show="QRCodeVisible">
            <div class="left2D">
              <button class="downBtn" @click = "downLoad0()">点击下载</button>
              <img class="TwoDbarcodeImg" :src="imgQRCode0">
              <span class="description">活动入口</span>
              <div class="tips"><span >提示</span><br></div>
              <div><span>你可以将入口二维码放入推广软文或海报内吸引用户参与</span></div>
            </div>
            <div class="right2D">
              <button class="downBtn" @click = "downLoad1()">下载</button>
              <img class="TwoDbarcodeImg" :src="imgQRCode1">
              <span class="description">排名入口</span>
              <div class="tips"><span >提示</span><br></div>
              <div><span>放入公众号里的自动回复中，可以引导用户关注你</span></div>
            </div>
          </div>
            <div class="playersInfo"  v-show="playerVisible">
              <div class="title">
                <span class="spanCss">参与总人数</span>
                <span class="sumCss">{{number}}人</span>
                <input type="text" name="search" class="search" placeholder="搜索"><img src="static/imgs/playersInfoImg/list_search.png" alt="">
              </div>
              <ul class="templateUl">
                <el-table
                  :data="tableData"
                  class="tableContent"
                  :default-sort = "{prop: 'grade', order: 'descending'}"
                  style="width: 100%">
                  <el-table-column
                    type="index"
                    label="排行"
                    width="80">
                  </el-table-column>
                  <el-table-column
                    label="微信头像">
                    <template slot-scope="scope">
                      <img :src=scope.row.wxImg alt="头像" style="width:50%;"/>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="nicname"
                    label="微信昵称">
                  </el-table-column>
                  <el-table-column
                    prop="openId"
                    label="openId">
                  </el-table-column>
                  <el-table-column
                    prop="grade"
                    sortable
                    label="得分">
                  </el-table-column>
                </el-table>
              </ul>
            </div>
        </div>
      </div>
      <Vfooter></Vfooter>
    </div>
</template>

<script>
import Vheader from './common/Vheader'
import Vfooter from './common/Vfooter'
import Vdialog from './common/Vdialog'
import { getGradeAction } from '../axios/api/playerRank_api'
import { getQRCode0Action, getQRCode1Action } from '../axios/api/myActivity_api'
export default {
  name: 'activityinfo',
  data () {
    return {
      header: {
        templateAction: this.templateAction,
        template: '返回首页'
      },
      activityId: '',
      tableData: [],
      number: 0, /* 返回的用户数据  */
      playerVisible: false,
      QRCodeVisible: true,
      isCss1: false,
      isCss2: false,
      isCss3: true,
      isCss4: true,
      count: '',
      imgQRCode0: '',
      imgQRCode1: '',
      type: '',
      templateName: ''
      /*  控制dialog是否显示，以及显示那个模块的变量  */
    }
  },
  components: {
    Vheader,
    Vfooter,
    Vdialog
  },
  created () {
    this.activityId = this.$route.query.activityId
    this.activityCode()
    this.templateName = this.$route.query.templateName
  },
  updated () {
    window.scroll(0, 0)
  },
  methods: {
    goBack () {
      this.$router.push({name: 'myActivity'})
    },
    activityCode () {
      this.playerVisible = false
      this.QRCodeVisible = true
      this.isCss1 = true
      this.isCss2 = false
      this.isCss3 = true
      this.isCss4 = false
      this.getQRCode0()
      this.getQRCode1()
    },
    templateAction () {
      this.$router.push({name: 'homePage'})
    },
    async getQRCode0 () {
      this.type = 0
      let data = await getQRCode0Action({activityId: this.activityId, type: this.type})
      this.imgQRCode0 = data.request.responseURL
    },
    // 获取玩家信息二维码
    async getQRCode1 () {
      this.type = 1
      let data = await getQRCode1Action({activityId: this.activityId, type: this.type})
      this.imgQRCode1 = data.request.responseURL
    },
    async downLoad0 () {
      this.type = 0
      let url = 'http://118.31.239.135:8125/littlefinger/activity/downloadQRCode?type=0&activityId=' + this.activityId
      window.location.href = url
    },
    async downLoad1 () {
      this.type = 1
      let url = 'http://118.31.239.135:8125/littlefinger/activity/downloadQRCode?type=1&activityId=' + this.activityId
      window.location.href = url
    },
    async playersInfo () {
      this.playerVisible = true
      this.QRCodeVisible = false
      this.isCss1 = true
      this.isCss2 = false
      this.isCss3 = true
      this.isCss4 = false
      let { data } = await getGradeAction({activityId: this.activityId})
      if (data.code === 1) {
        let activityGradeList = data.activityGradeList
        this.number = activityGradeList && activityGradeList.length
        activityGradeList.forEach((list, index) => {
          let item = {
            rank: index,
            wxImg: list.userInfo && list.userInfo.headimgurl,
            nicname: list.userInfo && list.userInfo.nickname,
            openId: list.username,
            grade: list.grade
          }
          this.tableData.push(item)
        })
      } else {
        this.$message({
          type: 'error',
          message: '服务器错误，请稍后再试！'
        })
      }
    }
  }
}
</script>

<style scoped>
  .titlename {
    font-family: 'SimSun';
    font-size: 24px;
    border: 1px solid #ccc;
    padding-bottom: 1%;
  }
  .leftContent{
    display: flex;
    flex-direction: column;
    width: 15%;
    height: 100%;
    background-color: #ffffff;
  }
  .leftcontentBar{
    position: relative;
    height: 70px;
    margin-bottom: 8px;
    font-family: 'SimSun';
    font-size: 24px;
    border: 1px solid #ccc;
    line-height: 65px;
  }
  .leftcontentBar:visited{
    background-color: #47cb69;
    color: #fff;
  }
  .leftcontentBar:hover{
    background-color: #47cb69;
    color: #fff;
  }
  .bgColorCss1{
    background-color: #e4e4e445;
    color: #8a8a8a;
  }
  .bgColorCss2{
    background-color: #47cb69;
    color: #fff;
  }
  .backBtn{
    position: relative;
    width: 85%;
    height: 40px;
    font-size: 24px;
    font-family: 'SimSun';
    color: #47cb69;
    border: 1px solid #47cb69;
    border-radius: 3px;
    margin-top: 620px;
    margin-left: 7.5%;
    background-color: transparent;
  }
  .backBtn:hover{
    background-color: #47cb69;
    color: #fff;
  }
  .rightBtn{
    position: relative;
    width: 80%;
    height: 45px;
    margin-right: 20px;
  }
  .downBtn{
    display: inline-block;
    width: 55%;
    height: 42px;
    color: #47cb69;
    border-radius: 3px;
    border: 1px solid #47cb69;
    margin-top: 14px;
    font-family: 'SimSun';
    font-size: 24px;
    background-color: transparent;
    margin-top: -5px;
  }
  .downBtn:hover{
    color: #fff;
    background-color: #50e476;
  }
  .download{
    position: relative;
    width: 80%;
    height: 45px;
    margin-right: 20px;
  }
  .TwoDbarcode{
    display:inline-block;
    flex-direction: row;
    justify-content: space-between;
    padding-left:25%;
    padding-right: 25%;
    /*padding-top: 20%;*/
    margin-top: 20%;
  }
  /*.TwoDbarcode span{*/
    /*display: inline-block;*/
    /*width: 100px;*/
    /*height: 10px;*/
    /*font-family: 'SimSun';*/
    /*margin-top: -40px;*/
    /*margin-left: 5px;*/
  /*}*/
  .left2D{
    float: left;
    width: 40%;
    /*padding-top: 40%;*/
  }
  .right2D{
    float: right;
    width: 40%;
    /*padding-top: 40%;*/
  }
  .TwoDbarcodeImg{
    width: 60%;
    height: 117px;
    background-color: #d6d6d6;
  }
  .playersInfo{
    min-width: 600px;
    overflow: hidden;
    background-color: #ffffff;
    font-family: 'SimSun';
    position: relative;
  }
  .playersInfo .templateUl{
    height: 680px;
    box-shadow: 4px 4px 13px #666;
    background-color: #fff;
    margin: 45px 120px;
    justify-content: center;
    flex-direction: column;
  }
  .title{
    /*margin: 45px 120px;*/
    justify-content: center;
    margin-top: 1%;
  }
  .title img{
    margin-left: -50px;
    margin-bottom: -17px;
  }
  .rightContent{
    display: flex;
    flex-direction: column;
    width: 75%;
    height: 100%;
    background-color: #ffffff;
    /*margin-left: 20%;*/
  }
  .content{
    display: flex;
    flex-direction: row;
  }
  .tips{
    /*height: 70px;*/
    /*margin-bottom: 8px;*/
    font-family: 'SimSun';
    font-size: 24px;
    line-height: 65px;
  }
  .description{
    display: inline-block;
    width: 55%;
    height: 42px;
    color: #47cb69;
    border-radius: 3px;
    border: 1px solid #47cb69;
    margin-top: 14px;
    font-family: 'SimSun';
    font-size: 24px;
    background-color: transparent;
    margin-top: -5px;
  }
  .search{
    width: 440px;
    height: 53px;
    background-color: #d6d6d6;
    color: #818181;
    font-family: 'SimSun';
    font-size: 10px;
    text-align: center;
    border:2px solid #c7c7c7;
    border-radius: 2px;
  }
  .playersInfo .spanCss{
    display: inline-block;
    width: 170px;
    height: 53px;
    font-family: 'SimSun';
    font-size: 25px;
    color: #fff;
    background-color: #47cb69;
    line-height: 53px;
    border-radius: 2px;
  }
  .sumCss{
    width: 100px;
    height: 53px;
    font-family: 'SimSun';
    font-size: 25px;
    color: #ccc;
    background-color: transparent;/*后面颜色透明*/
    text-align: center;
  }
  .sumCss{
    font-family: 'SimSun';
    font-size: 25px;
    color: #818181;
    text-align: center;
    margin-right: 100px;
  }
</style>
<style>
  .tableContent .has-gutter .is-leaf{
    background-color: #5f5f5f;
    color: #fff;
    text-align: center;
    font-size: 36px;
    height: 70px;
    border-right: 2px solid #ebeef5;
  }
  .tableContent.el-table th>.cell{
    line-height: 35px;
  }
  .tableContent.el-table tbody tr{
    height: 100px;
    font-size: 34px;
    background-color: #c7c7c7;
  }
  .tableContent tr{
    height: 100px;
  }
  .tableContent.el-table .cell{
    line-height: 35px;
    color: #fff;

  }
  .tableContent.el-table tr:nth-child(1){
    background-color: #ffa664;
  }
</style>
